<template>
  <div class="detail-navbar">
    <nav-bar bgc="#fff">
      <template #left>
        <go-back>
          <template>
            <img src="~assets/images/icon/goback.svg" alt />
          </template>
        </go-back>
      </template>
      <template #center>
        <tab>
          <template>
            <tab-item v-for="(value,key) in datas" :key="key" @click.native="scroll(value)">
              <template>
                <span>{{value.text}}</span>
              </template>
            </tab-item>
          </template>
        </tab>
      </template>
      <template #right>
        <go-cart>
          <template>
            <img src="~assets/images/icon/cart.svg" alt />
          </template>
        </go-cart>
      </template>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from "components/public/navbar/NavBar";
import GoBack from "components/public/goback/GoBack";
import GoCart from "components/public/gocart/GoCart";
import Tab from "components/public/tab/Tab";
import TabItem from "components/public/tab/TabItem";

import DetailScroll from "tool/animate";
export default {
  name: "DetailNavBar",
  props: {
    datas: {
      type: Object
    }
  },
  methods: {
    

    scroll(value) {
      // window.scrollTo(0,value.top)
      DetailScroll(window, value.top);
    }
  },
  components: {
    NavBar,
    GoBack,
    Tab,
    TabItem,
    GoCart
  }
};
</script>

<style lang="less" scoped>
</style>